<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <!--<script src="https://unpkg.com/vue"></script>-->
    <script src="Vuejs/Vue.js"></script>
    <title>VueTodos</title>
    <script type="text/x-template" id="myComponent">
        <span>总共{{ total }}个事件,,已完成{{done}}个事件,未完成{{total-done}}个事件.</span>
</script>
    <script>
        function nowTime(date) {
            var month = date.getMonth() + 1;
            var strDate = date.getDate();
            var hour = date.getHours();
            var minute = date.getMinutes();
            var second = date.getSeconds();
            if (hour >= 0 && hour <= 9) {
                hour = "0" + hour;
            }
            if (minute >= 0 && minute <= 9) {
                minute = "0" + minute;
            }
            if (second >= 0 && second <= 9) {
                second = "0" + second;
            }
            return (date.getFullYear()+"-"+month+"-"+strDate+" "+hour + ":" + minute + ":" + second)
        }
        window.onload = function() {
            Vue.component('todo-events', {
                // camelCase in JavaScript
                props: ['total','done'],
                //template: '<span>总共{{ total }}个事件,,已完成{{done}}个事件,未完成{{total-done}}个事件.</span>'
                template: '#myComponent'
            })
            var app = new Vue({
                el: '#app',
                data: {
                    events: [
                        {name: '阅读一本关于前端开发的书', finished: false,time:nowTime(new Date())},
                        {name: '补充范例代码', finished: true,time:nowTime(new Date())},
                        {name: '写心得',  finished: false,time:nowTime(new Date())}
                    ]
                },
                computed:{
                    doneEvents:function(){
                        var count=0;
                        for(var i=0;i<this.events.length;i++){
                            if(this.events[i].finished){
                                count++;
                            }
                        }
                        return count;
                    }
                },
                methods: {
                    addEvent: function () {
                        console.log("addEvent");
                        console.log("this.event1=" + this.event1);
                        if (!this.event1)  // if(this.name=="" || this.name== undefined||this.name==null)
                        {
                            console.log("this.event1");
                        }
                        else
                        {
                            this.events.push({name:this.event1,finished:false,time:nowTime(new Date())});
                        }
                    },
                    removeAllEvents: function () {
                        console.log("removeAllEvents");
                        console.log(this.events);
                        this.events=[];
                        console.log(this.events);
                    },
                    removeEventItem: function (index) {
                        console.log("removeEventItem");
                        this.events.splice(index, 1);
//                    this.name="";
//                    this.age="";
                    },
                    change:function (index) {
                        console.log(index+" "+this.events[index].finished);
//                        if(this.events[index].finished==true){
//                            this.events[index].finished=false;
//                        }else
//                        {
//                            this.events[index].finished=true
//                        }
                        this.events[index].finished=!this.events[index].finished;
                    }
                },
                filters: {
                    hhmmss: function (date) {
                        var month = date.getMonth() + 1;
                        var strDate = date.getDate();
                        var hour = date.getHours();
                        var minute = date.getMinutes();
                        var second = date.getSeconds();
                        if (hour >= 0 && hour <= 9) {
                            hour = "0" + hour;
                        }
                        if (minute >= 0 && minute <= 9) {
                            minute = "0" + minute;
                        }
                        if (second >= 0 && second <= 9) {
                            second = "0" + second;
                        }
                        return (date.getFullYear() + "-" + month + "-" + strDate + " " + hour + ":" + minute + ":" + second)
                    }
                }
            })
        }
    </script>
    <style>.del{text-decoration: line-through}</style>
</head>
<body>
<div id="app">
    <input v-model="event1" placeholder="请输入待办事件名称" @keyup.enter="addEvent"><input type="button" value="添加"  @click="addEvent">
     <table class="table">
         <caption>待办事件列表</caption>
         <thead>
         <tr>
             <th>是否选中</th>
             <th>事件名称</th>
             <th>是否完成</th>
             <th>添加时间</th>
             <th>操作</th>
         </tr>
         </thead>
         <tbody>
         <tr v-for="(event,index) in events">
             <td><input type="checkbox" v-bind:checked="event.finished" v-on:click="change(index)"></td>
             <td v-bind:class="{del:event.finished}"> {{ event.name }}</td>
             <td> {{ event.finished }}</td>
             <!--<td> {{ event.selected }}</td>-->
            <td>{{ event.time }}</td>
            <td><input type="button" value="删除" @click="removeEventItem(index)"></td>
        </tr>
        </tbody>
    </table>
    <todo-events :total="events.length" :done="doneEvents"></todo-events>

</div>
</body>
</html>